<template>
  <div style="display: flex;flex-direction: column;flex-wrap: wrap;align-content: flex-start;min-height: 20px;"
    :style="{
      'background': nodeModel.configDict.componentStyle.background,
      'width': nodeModel.configDict.componentStyle.width/2+'px',
      'marginTop': nodeModel.configDict.componentStyle.marginTop/2+'px',
      'marginBottom': nodeModel.configDict.componentStyle.marginBottom/2+'px',
      'marginLeft': nodeModel.configDict.componentStyle.marginLeft/2+'px',
      'marginRight': nodeModel.configDict.componentStyle.marginRight/2+'px',
      'paddingTop': nodeModel.configDict.componentStyle.paddingTop/2+'px',
      'paddingBottom': nodeModel.configDict.componentStyle.paddingBottom/2+'px',
      'paddingLeft': nodeModel.configDict.componentStyle.paddingLeft/2+'px',
      'paddingRight': nodeModel.configDict.componentStyle.paddingRight/2+'px',
    }">
    <div style="display: flex;flex-direction: row;flex-wrap: wrap;align-content: flex-start;min-height: 20px;"
    :style="{
      'flex-direction': nodeModel.configDict.componentStyle.flex_direction,
      'flex-wrap': nodeModel.configDict.componentStyle.flex_wrap,
      'overflow-x': 'scroll',
      'justify-content': nodeModel.configDict.componentStyle.justify_content,
      'align-items': nodeModel.configDict.componentStyle.align_items,
    }">
      <el-tabs v-model="currentTab" @tab-click="tabsClick" v-if="nodeModel.configDict.itemStyle.isShowForTabs">
        <el-tab-pane :label="item.text1" :name="item.text1" v-for="(item, index) in nodeModel.configDict.itemList" :key="index"></el-tab-pane>
      </el-tabs>
    </div>
    <div>
      <div v-if="itemList.length==0" style="height: 40px;line-height: 40px;width: 100%;text-align: center;">暂无数据</div>
      <div v-for="(item, index) in itemList" :key="index" 
      style="display: flex;border-bottom: 1px solid #eeeeee;"
      :style="{
        'background': nodeModel.configDict.itemStyle.background,
        'width': nodeModel.configDict.itemStyle.width/2+'px',
        'flex-direction': nodeModel.configDict.itemStyle.flex_direction,
        'justify-content': nodeModel.configDict.itemStyle.justify_content,
        'align-items': nodeModel.configDict.itemStyle.align_items,
        'marginBottom': nodeModel.configDict.itemStyle.marginBottomForItem/2+'px',
        'marginLeft': nodeModel.configDict.itemStyle.marginLeftForItem/2+'px',
        'paddingTop': nodeModel.configDict.itemStyle.paddingTopForItem/2+'px',
        'paddingBottom': nodeModel.configDict.itemStyle.paddingBottomForItem/2+'px',
        'paddingLeft': nodeModel.configDict.itemStyle.paddingLeftForItem/2+'px',
        'paddingRight': nodeModel.configDict.itemStyle.paddingRightForItem/2+'px',
      }">
          <div v-if="item.fileType=='video'" :style="{
          'width': nodeModel.configDict.itemStyle.widthForCover1/2 + 'px', 
          'height': nodeModel.configDict.itemStyle.heightForCover1/2 + 'px',
          'borderRadius': nodeModel.configDict.itemStyle.borderRadiusForCover1/2 + 'px'}">
            <video id="media" src="http://www.sundxs.com/test.mp4" controls :width="nodeModel.configDict.itemStyle.widthForCover1/2 + 'px'" :height="nodeModel.configDict.itemStyle.heightForCover1/2 + 'px'"></video> 
          </div>
          <el-image v-else :src="item.coverUrl" fit="cover" style="flex-shrink: 0;"
          :style="{
          'width': nodeModel.configDict.itemStyle.widthForCover1/2 + 'px', 
          'height': nodeModel.configDict.itemStyle.heightForCover1/2 + 'px',
          'borderRadius': nodeModel.configDict.itemStyle.borderRadiusForCover1/2 + 'px'}"></el-image>

        <div style="display: flex;flex-direction: column;justify-content: space-between;width: 100%;"
        :style="{
          'min-height': nodeModel.configDict.itemStyle.flex_direction=='row'||nodeModel.configDict.itemStyle.flex_direction=='row-reverse' ? nodeModel.configDict.itemStyle.heightForCover1/2 + 'px' : 0,
          'paddingTop': nodeModel.configDict.itemStyle.paddingTopForFlex2/2+'px',
          'paddingBottom': nodeModel.configDict.itemStyle.paddingBottomForFlex2/2+'px',
          'paddingLeft': nodeModel.configDict.itemStyle.paddingLeftForFlex2/2+'px',
          'paddingRight': nodeModel.configDict.itemStyle.paddingRightForFlex2/2+'px',
        }">
          <div>
            <div class="limitLineNumOfTwo" v-if="nodeModel.configDict.itemStyle.isShowForText1" :style="{
              'marginTop': nodeModel.configDict.itemStyle.marginTopForText1/2+'px',
              'color': nodeModel.configDict.itemStyle.colorForText1,
              'font-size': nodeModel.configDict.itemStyle.fontsizeForText1/2 + 'px',
              'font-weight': nodeModel.configDict.itemStyle.fontweightForText1,
              '-webkit-line-clamp': nodeModel.configDict.itemStyle.lineNumForText1,
            }">{{item.title}}</div>
            <div class="limitLineNumOfTwo" v-if="nodeModel.configDict.itemStyle.isShowForText2" :style="{
              'marginTop': nodeModel.configDict.itemStyle.marginTopForText2/2+'px',
              'color': nodeModel.configDict.itemStyle.colorForText2,
              'font-size': nodeModel.configDict.itemStyle.fontsizeForText2/2 + 'px',
              'font-weight': nodeModel.configDict.itemStyle.fontweightForText2,
              '-webkit-line-clamp': nodeModel.configDict.itemStyle.lineNumForText2,
            }">{{item.subTitle}}</div>
          </div>
          <div style="display: flex;flex-direction: row;align-items: center;justify-content: space-between;">
            <div v-if="nodeModel.configDict.itemStyle.isShowForText3" :style="{
              'marginTop': nodeModel.configDict.itemStyle.marginTopForText3/2+'px',
              'color': nodeModel.configDict.itemStyle.colorForText3,
              'font-size': nodeModel.configDict.itemStyle.fontsizeForText3/2 + 'px',
              'font-weight': nodeModel.configDict.itemStyle.fontweightForText3,
            }">
              {{ formatTime.dateFormat(nodeModel.configDict.itemStyle.formatForText3, item.createTime)}}
            </div>
            <div v-if="nodeModel.configDict.itemStyle.isShowForText4" :style="{
              'marginTop': nodeModel.configDict.itemStyle.marginTopForText4/2+'px',
              'color': nodeModel.configDict.itemStyle.colorForText4,
              'font-size': nodeModel.configDict.itemStyle.fontsizeForText4/2 + 'px',
              'font-weight': nodeModel.configDict.itemStyle.fontweightForText4,
            }">
              {{ nodeModel.configDict.itemStyle.beforeForText4 }} {{item.readUserCount}} {{ nodeModel.configDict.itemStyle.afterForText4 }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    components: {
        
    },
    props:{
        nodeModel:{
            type: Object,
            default: res=>{}
        },
    },
    watch: {
      'nodeModel.configDict.componentStyle.query': {
        immediate: true, // 如果设置为true，则组件实例化时立即触发一次
        handler(newVal, oldVal) {
          // console.log(`Name changed from ${oldVal} to ${newVal}`);
          this.loadData()
        },
      },
      'nodeModel.configDict.itemStyle.isShowForTabs': {
        immediate: false, // 如果设置为true，则组件实例化时立即触发一次
        handler(newVal, oldVal) {
          // console.log(`Name changed from ${oldVal} to ${newVal}`);
          this.loadData()
        },
      },
      'nodeModel.configDict.itemStyle.defaultSel': {
        immediate: true, // 如果设置为true，则组件实例化时立即触发一次
        deep: true,
        handler(newVal, oldVal) {
          // console.log(`Name changed from ${oldVal} to ${newVal}`);
          if(this.nodeModel.configDict.itemStyle.isShowForTabs){
            var item = this.nodeModel.configDict.itemList[newVal]
            this.currentTab = item.text1
            this.loadDataForTabs(item)
          }
        },
      },
    },
    data() {
      return {
        itemList: [],
        currentTab: '0'
      }
    },
    
    methods:{
      loadData(){
        if(!this.nodeModel.configDict.itemStyle.isShowForTabs){
          var query = JSON.parse(this.nodeModel.configDict.componentStyle.query)
          if(query.dataType == '1'){ //直接添加
            this.request_post(query.url, query).then(res => {
              if (res.data.code == 10000) {
                this.itemList = res.data.data.list
              }
            });
          }else if(query.dataType == '2'){ //按条件
            query.size = 10
            this.request_get(query.url, query).then(res => {
              if (res.data.code == 10000) {
                this.itemList = res.data.data.list
              }
            });
          }
        }
      },
      loadDataForTabs(item){
        var query = JSON.parse(item.query)
        if(query.dataType == '1'){ //直接添加
            this.request_post(query.url, query).then(res => {
              if (res.data.code == 10000) {
                this.itemList = res.data.data.list
              }
            });
          }else if(query.dataType == '2'){ //按条件
            query.size = 10
            this.request_get(query.url, query).then(res => {
              if (res.data.code == 10000) {
                this.itemList = res.data.data.list
              }
            });
          }
      },
      tabsClick(val){
        this.itemList = []
        var item = this.nodeModel.configDict.itemList[val.index]
        if(!item.query) return
        this.loadDataForTabs(item)
      },
    }
  }
</script>

<style lang="scss" scoped>
/* 限制两行,自动省略多余部分*/
.limitLineNumOfTwo{
	word-break:break-all;
	overflow : hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}
</style>